<template>
  <div class="homePage">
    <van-nav-bar fixed title="首页" />
    <div class="img"></div>
    <div class="gridDiv">
      <van-cell-group>
        <van-cell
          title="请选择您来访的方式·····>"
          value=""
          label="这将有助于我们的审批工作"
        />
      </van-cell-group>
      <van-grid class="homeGrid" clickable :column-num="2" :border="false">
        <van-grid-item
          class="gridItem"
          icon="setting"
          text="自驾"
          @click="handleClick('car')"
        />
        <van-grid-item
          class="gridItem"
          icon="fire"
          text="步行"
          @click="handleClick()"
        />
        <van-grid-item
          class="gridItem"
          icon="audio"
          text="骑行"
          @click="handleClick()"
        />
        <van-grid-item
          class="gridItem"
          icon="weapp-nav"
          text="其他"
          @click="handleClick()"
        />
      </van-grid>
    </div>

    <!-- <article-item :check="check" select="article"></article-item> -->
  </div>
</template>

<script>
/* eslint-disable */
import { buildURLWithParams } from "@/utils";
export default {
  name: "home-page",
  methods: {
    handleClick(type = "") {
      let path = "/apply-detail";
      let selectPath = "/recommend-select";
      if (type) {
        path = buildURLWithParams(path, { type });
        selectPath = buildURLWithParams(selectPath, { type });
      }
      this.$dialog
        .confirm({
          title: "提示",
          message: "本次申请是否需要指定推荐人？",
          confirmButtonText: "需要",
          cancelButtonText: "不需要",
        })
        .then(() => {
          this.$router.push(selectPath);
        })
        .catch(() => {
          this.$router.push(path);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.homePage {
  background-color: #f5f5f5;
  padding: 0 10px;
  height: 100vh;
  .img {
    margin-top: 40px;
    padding-top: 80px;
    height: 20vh;
    background-image: url(../assets/img/linpingilovezheli.jpg);
    background-size: contain;
  }
}
.gridDiv {
  margin-top: 10px;
  border-radius: 12px;
  // border: 3px solid pink;
}
.homeGrid {
  // .gridItem {
  //   background-color: #4d4d4d;
  // }
}
</style>
